<template>
  <div class="domain-detail">
    <!-- 第一行信息 -->
    <div class="info-row">
      <div class="info-item">
        <label>集群：</label>
        <span>{{ clusterDnsInfo.clusterName }}</span>
      </div>
      <div class="info-item">
        <label>DNS子域名：</label>
        <span v-if="clusterDnsInfo.dnsDomain">{{ clusterDnsInfo.dnsDomain }}</span>
        <span v-else class="disabled">没有设置</span>
        <el-button type="text" @click="handleModify">[修改]</el-button>
      </div>
      <div class="info-item">
        <label>DNS服务商：</label>
        <template>
          <dict-tag :options="dict.type.edge_dns_providers" :value="clusterDnsInfo.providerType"/>
        </template>
      </div>
      <div class="info-item">
        <label>自动设置CNAME记录：</label>
        <span v-if="clusterDnsInfo.cname">已设置</span>
        <span v-else class="disabled">暂时还没有设置</span>
      </div>
    </div>

    <!-- 需要修复的问题 -->
    <div class="section">
      <h3>需要修复的问题（{{ issues.length }}个）</h3>
      <el-table :data="issues" style="width: 100%">
        <el-table-column prop="target" label="问题对象"></el-table-column>
        <el-table-column prop="description" label="问题描述"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default>
            <el-button type="primary" size="small">修复</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tip">
        说明：下面的DNS解析记录也可以手工在DNS服务商提供的管理平台添加。
      </div>
    </div>

    <!-- 节点DNS解析记录 -->
    <div class="section">
      <h3>节点DNS解析记录（{{ nodeRecords.length }}个）</h3>
      <el-table :data="nodeRecords" style="width: 100%">
        <el-table-column prop="node" label="节点"></el-table-column>
        <el-table-column prop="subdomain" label="子域名"></el-table-column>
        <el-table-column prop="type" label="记录类型"></el-table-column>
        <el-table-column prop="value" label="记录值"></el-table-column>
        <el-table-column label="线路" width="180">
          <template #default="{ row }">
            <span v-if="row.line">{{ row.line }}</span>
            <el-button v-else type="text" @click="setLine(row)">没有设置</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default>
            <el-button type="primary" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 网站解析记录 -->
    <div class="section">
      <h3>网站解析记录（{{ webRecords.length }}个）</h3>
      <el-table :data="webRecords" style="width: 100%">
        <el-table-column prop="website" label="网站"></el-table-column>
        <el-table-column prop="subdomain" label="子域名"></el-table-column>
        <el-table-column prop="type" label="记录类型"></el-table-column>
        <el-table-column label="记录值">
          <template #default="{ row }">
            <span v-if="row.value">{{ row.value }}</span>
            <span v-else class="disabled">没有设置</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {clusterDnsInfo, clusterDnsInfoList} from "@/api/nodes/clusters";

export default {
  dicts: ['edge_dns_providers'],
  data() {
    return {
      clusterId: null,
      clusterDnsInfo: {
        clusterName: null,
        dnsSubdomain: null,
        providerType: '',
        cname: false
      },
      issues: [
        { target: 'DNS配置', description: 'CNAME记录未设置' },
        { target: '节点01', description: '解析线路未配置' }
      ],
      nodeRecords: [
        { node: '节点01', subdomain: 'node1', type: 'A', value: '192.168.1.1', line: '', status: '正常' }
      ],
      webRecords: [
        { website: '主站', subdomain: 'www', type: 'CNAME', value: '', status: '异常' }
      ]
    }
  },
  created() {
    // 组件创建时获取路由参数
    this.clusterId = this.$route.params.id
    this.getClusterDnsInfo();
  },
  watch: {
    // 监听路由变化，当路由参数发生变化时，重新获取数据
    '$route'(to, from) {
      if (to.params.id !== from.params.id) {
        this.clusterId = to.params.id;
        this.getClusterDnsInfo();
      }
    }
  },
  methods: {
    handleModify() {
      // 修改DNS子域名逻辑
    },
    setLine(record) {
      // 设置线路逻辑
    },
    // 获取根据集群ID获取域名解析信息
    getClusterDnsInfo(){
      clusterDnsInfo(this.clusterId).then(response => {
        this.clusterDnsInfo = response;
        this.loading = false;
      });
    },
  }
}
</script>

<style scoped lang="scss">
.domain-detail {
  padding: 20px;

  .info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;

    .info-item {
      display: flex;
      align-items: center;

      label {
        font-weight: bold;
        margin-right: 5px;
      }

      .disabled {
        color: #999;
      }

      .error {
        color: #f56c6c;
      }
    }
  }

  .section {
    margin-bottom: 30px;

    h3 {
      margin: 20px 0;
      color: #333;
    }

    .tip {
      margin-top: 10px;
      color: #666;
      font-size: 12px;
    }
  }

  .el-button--text {
    padding: 0;
    margin-left: 10px;
  }
}
</style>
